<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<uni-search-bar bgColorCls="bg-steelblue" cancelColor="text-white" :focus="focus" :placeholder="placeholder"
			 @confirm="confirm" @input="confirm"></uni-search-bar>
		</view>
		<view class="page__bd" style="padding-top: 100rpx;"></view>
		<scroll-view :scroll-y="true" style="max-height: 250px;" class="scroll-Y">
			<view class="flex padding">
				<view class="tui-col-6 align-center flex">{{'已选中['+selectNameList.length+']'}}</view>
				<view class="tui-col-6 tui-right"><button type="primary" size="mini" @click="confirmSelect">完成</button></view>
			</view>
			<ot-input-tags id="ot-input-tags-id" class="bg-white" placeholder="选中项展示区" @change="changeTags" :selectlist='selectNameList'
			 disabled></ot-input-tags>
		</scroll-view>
		<om-divider :gap="[0, 0]"></om-divider>
		<view>
			<uni-list v-if="commonData.datas">
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item showArrow :title="item[namefield]" :extraText="item[extrafield]" :avatar="index + 1" :avatarBgColor="calcBgColor(item)"
					 @click="itemtap(item)"></uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
		</view>
	</om-page>
</template>

<script>
	import listLoad from '../../../static/js/listLoad.js';
	import {
		hasValue
	} from '@/static/js/formUtil.js';
	const app = getApp()
	export default {
		data() {
			return {
				scrollViewHeight: 250,
				scrollTop: 0,
				searchStr: "",
				commonData: {
					datas: []
				},
				dataMap: {},
				pageTitle: "搜索",
				placeholder: "请输入姓名、岗位、机构",
				selectNameList: [], //字符串数组
				selectItemList: [], //选中的项目列表
				method: 'get', //url对应的服务器方法的请求类型
				url: 'temployee/getAutoCombobox', //服务器路径（必有）
				namefield: "userSalaryPosInstName", //保证正确，显示属性,列标题
				extrafield: "salaryPosInstName",
				searchfield: "q", //查询属性
				pagination: false,
				other: {}, //其他查询属性
				initload: false,
				focus: false
			}
		},
		computed: {
			getHeightStyler() {
				return `height:${this.scrollViewHeight}px;`;
			},
		},
		watch: {
			datas(newValue, oldValue) {
				let _that = this
				newValue.forEach((item) => {
					_that.dataMap[item.id] = item
				})
			}
		},
		created: function() {
			this.initData = this._.debounce(this.initData, 300)
		},
		methods: {
			getExtra(item) {
				var s = ""
				if (this.extrafield) {
					var arr = this.extrafield.split(this.extrasplit)
					if (arr.length) {
						arr.forEach(e => {
							if (item[e] != null && item[e] != undefined) {
								if (s) {
									s += " " + this.extrasplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			},
			calcBgColor(item) {
				var selectNames = this.selectNameList.map(e => e.title)
				if (selectNames.includes(item[this.namefield])) {
					return 'olive light'
				} else {
					return ''
				}
			},
			confirm(e) {
				let _that = this;
				if (e && e.value) {
					if (!this.searchStr || (this.searchStr && this.searchStr != e.value.trim())) {
						this.searchStr = e.value.trim()
						_that.initData()
					}
				} else {
					this.searchStr = ''
					if (this.initload) {
						_that.initData()
					} else {
						this.commonData.datas = []
					}
				}
			},
			initData() {
				let query = {}
				Object.assign(query, this.other)
				query[this.searchfield] = this.searchStr
				listLoad.initData(this, this.url, query)
			},
			searchClear() {
				this.commonData = {}
			},
			itemtap: function(item) {
				var selectNames = this.selectNameList.map(e => e.title)
				if (selectNames.includes(item[this.namefield])) {
					var index = this._.indexOf(selectNames, item[this.namefield])
					this.changeTags([], index)
				} else {
					this.selectNameList.push({
						title: item[this.namefield]
					})
					this.selectItemList.push(item)
				}
			},
			//删除时，index有值
			changeTags(selectList, index) {
				if (hasValue(index)) {
					if ((!selectList || !selectList.length) && this.selectNameList.length) {
						this.selectNameList.splice(index, 1);
					}
					this.selectItemList.splice(index, 1);
				}
			},
			confirmSelect() {
				let _that = this
				let pages = getCurrentPages();
				if (pages.length > 2) {
					let prePage = pages[pages.length - 2]
					//#ifdef APP-PLUS
					for (var iref in prePage.$vm.$refs) {
						var autoform = prePage.$vm.$refs[iref]
						autoform.formdata.formUserIds = this.selectItemList.map(e => e.id).join(",")
						autoform.formdata.formUserNames = this.selectItemList.map(e => e.userPosInstName).join(",")
						break
					}
					//#endif
					//#ifndef APP-PLUS
					for (var iref in prePage.$refs) {
						var autoform = prePage.$refs[iref]
						autoform.formdata.formUserIds = this.selectItemList.map(e => e.id).join(",")
						autoform.formdata.formUserNames = this.selectItemList.map(e => e.userPosInstName).join(",")
						break
					}
					//#endif
					uni.navigateBack()
				} else {
					this.om.toast("页面异常")
				}
			},
		},
		onLoad(options) {
			let _that = this
			this.pageTitle = options.title || "搜索"
			this.confirm()
			this.$nextTick(function() {
				_that.focus = true
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (this.pagination) {
				listLoad.reachBottom(this)
			} else {
				this.commonData.pullUpOn = false
			}
		}
	}
</script>

<style>
	.scroll-Y {
		/* top: 0; */
		/* position: fixed; */
		z-index: 10;
		background-color: white;
		box-shadow: 0 1px 10px #929191;
		/*for Android*/
		-webkit-box-shadow: 0px 1px 10px #b3b2b2;
		/*for IOS*/
	}
</style>
